<template>
  <div class="container">
    <div class="title">硫化氢传感器</div>
    <div class="content-container">
      <div class="tip-container">
        <div class="tip-circle circle1"></div>
        <div class="tip-text">正常</div>
        <div class="tip-circle circle2"></div>
        <div class="tip-text">接近超标</div>
        <div class="tip-circle circle3"></div>
        <div class="tip-text">超标</div>
      </div>
      <div class="chart-top" ref="chart1"></div>
      <div class="chart-bottom-container">
        <div class="chart-bottom-1" ref="chart2"></div>
        <div class="chart-bottom-2" ref="chart3"></div>
      </div>
    </div>
  </div>
</template>

<script>

  import $ from 'jquery'
  import _ from 'lodash'
  import * as Constant from './common/Constant';

  import highcharts from 'highcharts'
  import HighchartsMore from 'highcharts/highcharts-more';

  import chartConfig from './chartConfig/Methane';

  HighchartsMore(highcharts)

  export default {
    name: 'HepaticGas',
    data() {
      return {
        chartData1:{},
        chart1:null,
        chartData2:{},
        chart2:null,
        chartData3:{},
        chart3:null,
      }
    },
        computed: {},
    methods: {
      getData(){
        let me = this;

        if(Constant.LOCAL){
          me.chartData1 = chartConfig.getConfig(_.random(1,200));
          me.chartData2 = chartConfig.getConfig(_.random(1,200),false);
          me.chartData3 = chartConfig.getConfig(_.random(1,200),false);

          me.updateChart();
        }
      },
      updateChart(){
        let me = this;
        if(!this.chart1){
          this.chart1 = highcharts.chart(this.$refs.chart1, this.chartData1)
        }else{
          this.chart1.series[0].points[0].update(this.chartData1.series[0].data[0])
        }
        if(!this.chart2){
          this.chart2 = highcharts.chart(this.$refs.chart2, this.chartData2)
        }else{
          this.chart2.series[0].points[0].update(this.chartData2.series[0].data[0])
        }
        if(!this.chart3){
          this.chart3 = highcharts.chart(this.$refs.chart3, this.chartData3)
        }else{
          this.chart3.series[0].points[0].update(this.chartData3.series[0].data[0])
        }
        setTimeout(me.getData, Constant.INTERVAL*1000);
      },
    },
    mounted() {
      let me = this;
      this.getData();
    },
    created() {

    }
  }
</script>

<style lang="stylus" scoped>
  .content-container
    display: flex;
    flex-direction: column;
    .tip-container
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      margin-bottom 5px;
      .tip-circle
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
      .circle1
        background-color #17b9b1
      .circle2
        background-color #BED474
        margin-left: 8px;
      .circle3
        background-color #BC2C5E
        margin-left: 8px;
      .tip-text
        font-size: 12px;
        color: #fff
    .chart-top
      flex: 1;
      width: 100%;
    .chart-bottom-container
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row;
      .chart-bottom-1
        flex: 1;
        display flex
        align-items center
      .chart-bottom-2
        flex: 1;
        display flex
        align-items center
</style>
